<template>
	<van-cell-group>
		<van-field
		  label="账号"
		  :value="GF_ACCOUNT"
		  placeholder="请输入GF账号/手机号"
		  @input="updateGF_ACCOUNT"
		/>
		<van-field
		  label="验证码"
		  :value="moblie_sms_code"
		  placeholder="请输入验证码"
		  use-button-slot
		  @input="updateMoblieSmsCode"
		><van-button slot="button" size="small" type="default" @click="requestVerificationCode">{{buttonText}}</van-button>
		</van-field>
	</van-cell-group>
	
	<button class="confirmButton btn"  :style="{ backgroundColor: buttonColor }" @click="Login_phone">
	  确定
	</button>
	
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import decRegisterApi from '/api/dec/decUser/decRegisterApi.js';//Send_sms_API

// 全局状态globalData
import { storeToRefs } from "pinia";
import { useGlobalDataStore } from "@/globalData.js"
const { globalData } = storeToRefs(useGlobalDataStore());

	const GF_ACCOUNT= ref('');
	const moblie_sms_code = ref('');
	const buttonText = ref('验证码');
	const visit_data = ref();
	const system_info = ref();
	const encrypted_pwd_info = ref();
	
	const buttonColor = computed(() => {
		  if (
		    GF_ACCOUNT.value &&
		    moblie_sms_code.value 
		  ) {
		    return '#ffaa00' 
		  } else {
		    return '#e2e2e2' 
		  }
		});
		
	async function Loading_data() {
		visit_data.value = globalData.value.VISIT_DATA;
		system_info.value  = globalData.value.SYSTEM_INFO;
		encrypted_pwd_info.value  = globalData.value.ENCRYPTED_PWD_INFO;
		
		console.log('visit_data: ', visit_data.value );
		console.log('system_info: ', system_info.value );
		console.log('encrypted_pwd_info: ', encrypted_pwd_info.value );
	}
	
	function updateGF_ACCOUNT(event) {
	  GF_ACCOUNT.value = event.detail;
	}

	function updateMoblieSmsCode(event) {
	  moblie_sms_code.value = event.detail; 
	}
	
	function Send_sms(phone_num) {
	  console.log("phone_num",phone_num);
	  if (!phone_num) {
	    console.error("手机号为空，请检查");
	    return;
	  }
	  const ts = Date.now().toString();
	  let params = {
		  mob_code: '86',
	    mob: phone_num,
	    type: '2',
	    client_type: system_info.value.device_type,
	    time: ts,
	  };
	  decRegisterApi.Send_sms_API(params).then((res) => {
	    console.log('Send_sms_API成功，', res);
	  }).catch((err) => {
	    console.error('Send_sms_API失败，', err);
	  });
	}
	
	async function requestVerificationCode() {
	  Send_sms(GF_ACCOUNT.value)
	}
	
	onMounted(async () => {
	  await Loading_data();
	})


</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
::v-deep .van-button--default {
  background-color: #F3F3F3 !important;
  color: #ffaa00 !important;
  width: 132rpx;
}
.btn {
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
}
.confirmButton {
  width: 90%;
  height: 100rpx;
  font-size: 40rpx;
  color: #fff;
  border-radius: 32rpx;
  bottom: 60rpx;
  left: 5%;
  right: 5%;
}
</style>